<script setup lang="ts">
import {
  defaultPagingParams1,
  statusOptions1,
} from '../index'
import type {
  CalculationIndicatorRecalculationSelectRecalculationSchedulePageResult as A,
  CalculationIndicatorRecalculationSelectRecalculationScheduleDetailPageResult as B,
  CustomDialogInstance,
  TableColumn,
} from '@/types'
import { calculationIndicatorRecalculationApi } from '@/api'
// ------------------use------------------
// #region
const props = defineProps<{
  data: Partial<A>
}>()
const [tableData, setTableData] = useState<B[]>([])
const { withLoading, loading } = useDefineLoading({
  destroyNode: true,
})
const [total, setTotal] = useState<number>(0)
const [isFullable, setIsFullable] = useState(false)
const [info, setInfo] = useState<
  Record<string, { type: number, formulaContent: string }>
>({})
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<B>[] = [
  {
    key: uuid(),
    label: '时间',
    width: '140',
    fixed: 'left',
    render({ row }) {
      return row.dataTime ?? '---'
    },
  },
  {
    key: uuid(),
    label: '值',
    prop: 'dataValue',
  },
  {
    key: uuid(),
    label: '失败原因',
    render({ row }) {
      return row.errMsg ?? '计算错误'
    },
  },
  {
    key: uuid(),
    label: '计算参数明细',
    width: '400',
    prop: 'parameterDetail',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const query = ref('')
const dialogRef = ref<CustomDialogInstance | null>(null)
const pagingParams = ref({
  ...defaultPagingParams1,
})
// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
const currentInfo = computed(
  () => unref(info)[props.data.timeType!]!,
)
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function open() {
  dialogRef.value?.open?.()
  await nextTick()
  dialogRef.value?.setSaving?.(false)
  getTableData()
  getInfo()
}
function close() {
  dialogRef.value?.close?.()
}
async function getTableData() {
  const params = {
    ...unref(pagingParams),
    state: query.value,
  }

  params.key = props.data.timeType!
  params.id = props.data.id!

  const { data: res } = await withLoading(
    calculationIndicatorRecalculationApi.selectRecalculationScheduleDetailPage,
  )(params)

  const { total, records } = res

  setTotal(total)
  setTableData(records)
}
async function getInfo() {
  const { data: res }
    = await calculationIndicatorRecalculationApi.selectFormulaContentByIndicatorNumber(
      props.data.indicatorNumber!,
    )
  setInfo(res)
}
// #endregion
defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="指标重算明细"
    width="900px"
    fullable
    :show-confirm-button="false"
    cancel-button-text="关闭"
    @fullscreen="setIsFullable"
  >
    <div
      class="padding-bottom-xs box-border flex container"
      :class="[
        isFullable ? 'height-fill' : 'height-vh-1/2',
      ]"
    >
      <div
        class="flex-sub height-fill flex-incompressible margin-right-sm"
        style="width: 275px"
      >
        <p class="margin-top-0">
          指标名称:
          <span class="margin-left-xs">
            {{ data.indicatorName }}
          </span>
        </p>
        <p
          class="text-overflow-hide"
          :title="data.indicatorNumber ?? ''"
        >
          指标编码:
          <span class="margin-left-xs">
            {{ data.indicatorNumber }}
          </span>
        </p>
        <p>
          计算类型:
          <el-tag size="small" class="margin-left-xs">
            {{
              typeof currentInfo?.type === 'number'
                ? currentInfo.type === 0
                  ? '无'
                  : currentInfo.type === 1
                    ? '录入'
                    : currentInfo.type === 2
                      ? '计算公式'
                      : '统计公式'
                : '---'
            }}
          </el-tag>
        </p>
        <div
          v-if="[3, 4].includes(currentInfo?.type ?? 0)"
          class=""
        >
          <span class="" style="white-space: nowrap">
            计算公式:
          </span>
          <br>
          <div class="code padding-xs margin-top-xs">
            {{ currentInfo?.formulaContent ?? '---' }}
          </div>
        </div>
      </div>
      <div
        class="flex-direction overflow flex-fillRemaining flex align-end"
      >
        <view-table
          :loading="loading"
          :columns="columns"
          :data="tableData"
          border
        >
          <!-- <template #detail>
            <div>
              <p class="margin-0">
                EU04.MM1.EU04-023800-1.FlowL(全厂原料石头)-实时=60
              </p>
              <p class="margin-0">
                EU04.MI.EU04-023800-1.FlowL(全厂原料石头)-15分钟=10
              </p>
              <p class="margin-0">
                EU04.M1.EU04-023800-1.FlowL(全厂原料石头)-小时=40
              </p>
            </div>
          </template> -->
          <template #actions>
            <el-form
              inline
              label-width="50px"
              label-position="left"
              class="flex-incompressible width-fill"
            >
              <el-form-item label="状态">
                <el-select
                  v-model="query"
                  clearable
                  style="width: 80px"
                  class="free"
                >
                  <el-option
                    v-for="item in statusOptions1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <SearchButton @click="getTableData" />
              </el-form-item>
            </el-form>
          </template>
        </view-table>
        <!-- 分页 -->
        <ListsPagination
          v-model:page-num="pagingParams.pageNumber"
          v-model:page-size="pagingParams.pageSize"
          :total="total"
          @current-change="getTableData"
          @size-change="getTableData"
        />
      </div>
    </div>
  </CustomDialog>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
.code {
  background: var(--el-bg-color-page);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-regular);
}
//-------------样式穿透-------------
</style>
